finish Loading动画
发表于更新于
字数总计:662阅读时长:3分钟 上海
建设进度finish Loading动画
睡着の黑色素修改fullpage-loading.pu
修改themes/butterfly/layout/includes/loading/fullpage-loading.pug
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') .loading-bg div.loading-img .loading-image-dot
script. const preloader = { endLoading: () => { document.body.style.overflow = 'auto'; document.getElementById('loading-box').classList.add("loaded") }, initLoading: () => { document.body.style.overflow = ''; document.getElementById('loading-box').classList.remove("loaded")
} } window.addEventListener('load',()=> { preloader.endLoading() })
if (!{theme.pjax && theme.pjax.enable}) { document.addEventListener('pjax:send', () => { preloader.initLoading() }) document.addEventListener('pjax:complete', () => { preloader.endLoading() }) }
|
新建css
新建source/css/progress_bar.css ,也可以不做这一步下面配置文件pace_css_url 这一项就要留空, 这一步是修改 pace 加载的胶囊 💊 样式用的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
| .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 10px; left: 0; right: 0; height: 8px; border-radius: 8px; width: 4rem; background: #eaecf2; border: 1px #e3e8f7; overflow: hidden; }
.pace-inactive .pace-progress { opacity: 0; transition: 0.3s ease-in; }
.pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 200px; position: absolute; z-index: 2000; display: block; top: 0; right: 100%; height: 100%; width: 100%; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: gradient 1.5s ease infinite; background-size: 200%; }
.pace.pace-inactive { opacity: 0; transition: 0.3s; top: -8px; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
|
修改loading.styl
修改themes/butterfly/source/css/_layout/loading.styl ,注意其中颜色代码–anzhiyu-card-bgl 等需自行替换为自己的色值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| if hexo-config('preloader') .loading-bg display: flex; width: 100%; height: 100%; position: fixed; background: var(--anzhiyu-card-bg); z-index: 1001; opacity: 1; transition: .3s;
#loading-box .loading-img width: 100px; height: 100px; border-radius: 50%; margin: auto; border: 4px solid #f0f0f2; animation-duration: .3s; animation-name: loadingAction; animation-iteration-count: infinite; animation-direction: alternate; .loading-image-dot width: 30px; height: 30px; background: #6bdf8f; position: absolute; border-radius: 50%; border: 6px solid #fff; top: 50%; left: 50%; transform: translate(18px, 24px); &.loaded .loading-bg opacity: 0; z-index: -1000;
@keyframes loadingAction 0% { opacity: 1; }
100% { opacity: .4; }
|
添加自定义 css
在合适的地方加上自定义 css, 其中 background 的 url 即为 loading 的图片地址。
1 2 3 4
| .loading-img { background: url(https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp) no-repeat center center; background-size: cover; }
|
设置动画效果
最后修改_config.butterfly.yml 中preloader 选项, 改完以后source: 1 为满屏加载无pace胶囊,source: 2 为pace胶囊无满屏动画, source: 3 是两者都启用。
1 2 3 4 5 6 7 8 9 10 11
| preloader: enable: true source: 3 pace_css_url: /css/progress_bar.css avatar:
|